<template>
	<view class="container">
		<scroll-view class="page-content" :scroll-top="0" scroll-y="true" refresher-default-style='none'
			@scrolltolower='scrollBottom'>
			<view class="card-box display-flex" v-for="(item,index) in dataList" :key="index" v-if="!nodata">
				<image class="bg-item" src="/static/3004.png" />
				<view class="info-box">
					<view class="name">{{item.cardName}}</view>
					<view class="value" v-if="item.consumeType==='B'">{{parseFloat(item.count/100).toFixed(2)}}元</view>
					<view class="value" v-else>{{item.count}}积分</view>
				</view>
			</view>
			<view class="empty" v-else>
				<image src="/static/nodata.png" mode=""></image>
				<view>暂无数据</view>
			</view>
		</scroll-view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom,
	} from '@dcloudio/uni-app'
	import utils from '/common/util.js'
	// 列表-数据
	const dataList = ref([])
	// 列表-分页数据
	const pageInfo = ref({
		isLoading: true,
		isEndPage: true,
		pageIndex: 1,
		pageSize: 20
	})
	// 列表-无数据
	const nodata = ref(false)
	// 初始化参数
	const initList = () => {
		pageInfo.value = {
			isLoading: true,
			isEndPage: true,
			pageIndex: 1,
			pageSize: 20
		}
		getData()
	}
	const getData = () => {
		let params = {
			page: pageInfo.value.pageIndex,
			pageSize: pageInfo.value.pageSize
		}
		getApp().globalData.serviceApi(params, 'cardList', '').then(res => {
			uni.hideLoading()
			// console.log('dataList:'.dataList.value);
			pageInfo.value.isEndPage = res.data.records.length < pageInfo.value.pageSize
			pageInfo.value.isLoading = false
			if (res.data.records.length == 0) {
				nodata.value = true
			} else {
				nodata.value = false
				dataList.value = pageInfo.value.pageIndex === 1 ? [...res.data.records] : [...dataList.value,
					...
					res.data.records
				]
			}
		}).catch(error => {
			pageInfo.value.isEndPage = true
			pageInfo.value.isLoading = false
			dataList.value = []
		})
	}
	// 上提加载事件
	const scrollBottom = () => {
		console.log('*******触底了*******', pageInfo.value.isEndPage);
		if (pageInfo.value.isLoading) return
		if (pageInfo.value.isEndPage) {
			uni.showToast({
				icon: 'none',
				title: '没有更多了'
			})
			return
		}
		pageInfo.value.pageIndex++
		getData()
	}
	onMounted(() => {
		console.log('组件已经挂载')
		getData()
	})
</script>

<style lang="less" scoped>
	.container {
		position: relative;
		width: 100%;
		min-height: 100%;
		padding: 10rpx;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: -1;
			// background: url('/static/3001.png') left top / 100% no-repeat;
		}

		.person-box {

			padding: 80rpx 30rpx 76rpx;
			color: #fff;

			.img {
				width: 140rpx;
				height: 140rpx;

			}

			.info-box {
				width: calc(100% - 140rpx - 50rpx);
				padding-left: 30rpx;

				.name {
					font-size: 42rpx;
				}
			}

			.seting {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.card-box {
			width: calc(100% - 60rpx);
			position: relative;
			padding: 46rpx 40rpx;
			margin-left: 30rpx;

			// background: url('/static/3004.png') top left / 100% 100% no-repeat;
			.bg-item {
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				width: 100%;
				height: 100%;
			}

			margin-top: 20rpx;
			color: #fff;

			.name {
				font-size: 32rpx;
			}

			.value {
				font-size: 46rpx;
				padding-top: 30rpx;
				font-weight: 600;
			}
		}

		.list {
			padding: 20rpx 30rpx 0;

			.item {
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1px solid #e5e5e5;

				.arrow {
					width: 28rpx;
					height: 28rpx;
				}

				&:last-child {
					border: none
				}
			}
		}
	}

	.empty {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
		padding-bottom: 50rpx;

		image {
			width: 256rpx;
			height: 196rpx;
			margin-bottom: 40rpx;
		}
	}
</style>